<template>
  <div>
    <!-- table -->
    <FilterTable
      height="250"
      ref="listModal"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'records'"
      :onColumnsChange="columns => this.columns = columns"
      :onRowSelectChange="selectChange"
        columnsRef="notification_maintain_oemRoleGroup_01"
    >
    <template slot="controls">
        <el-button size="small" type="primary" icon="el-icon-plus" @click="groupHeader('add')">新增分组</el-button>
    </template>
    </FilterTable>

    <BaseDialog title="角色分组维护" :visible.sync="visibleRoleGroup" width="1000px" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <role-group ref="addRoleGroup" :rowData="formData" :type="handleTypeAdd" @close="closeGroup" />
    </BaseDialog>

    <div class="dialogBottmView">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button @click="saveDialog" type="primary">确定</el-button>
    </div>
  </div>
</template>
<script>
import { dictionary } from '@/utils/dictMixin';
import roleGroup from '@/pages/cms-pages/notification/maintain/roleGroup';
import {pageNotificationGroupList } from '@/api/cms-api/notification/maintain/index';
export default {
  mixins: [dictionary],
  components: {
    roleGroup
  },
  data() {
    return {
      columns: this.creatHeader(),
      fetchApi: pageNotificationGroupList,
      fetchParams: {
        notificationGroupType:1
      },
      visibleRoleGroup:false,
      selectedRows: null,
      formData: {}
    };
  },
  methods: {
    //table表头和数据源
    creatHeader() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作',
          dataIndex: 'column-action',
          fixed: 'left',
          render: props => {
            return (
              <div>
                <el-button size="mini" type="text" onClick={() => this.editHandle(props.row, 'edit')}>
                  编辑
                </el-button>
              </div>
            );
          }
        },
        { title: '分组名称', dataIndex: 'notificationGroupName', sorter: true }
      ];
    },
    //选中
    selectChange(rows) {
      this.selectedRows = rows;
      console.log(this.selectedRows);
    },
    //取消操作
    closeDialog() {
      this.$emit('close',  false ,'refresh');
    },
    //维护组与角色 -打开
    groupHeader(type){
      this.handleTypeAdd = type;
      this.visibleRoleGroup = true;
    },
    //维护组与角色 -关闭
    closeGroup(){
      this.visibleRoleGroup = false;
      this.fetchParams = { ...this.fetchParams };
    },
    //确定
    saveDialog() {
      //封装数据
      let rows = [];
      for(let i = 0 ; i < this.selectedRows.length ; i++){
        if(this.selectedRows[i].roleId != null){
          if (this.selectedRows[i].roleId.indexOf(',')  != -1) {
            let roleIds = this.selectedRows[i].roleId.split(',');
            let roleCodes = this.selectedRows[i].roleCode.split(',');
            let roleNames = this.selectedRows[i].roleName.split(',');
            for (let y = 0 ;y < roleIds.length ; y++) {
               let data = {}
               data.roleId = roleIds[y];
               data.roleCode  =  roleCodes[y];
               data.roleName  =  roleNames[y];
               rows.push(data);
              }
          }else{
            let data2 = {}
            data2.roleId = this.selectedRows[i].roleId;
            data2.roleCode  =  this.selectedRows[i].roleCode;
            data2.roleName  =  this.selectedRows[i].roleName;
            rows.push(data2);
          }
        }
      }
      console.log(rows)
      this.$emit('close', { visible: false, data: rows });
    },

    //编辑
    editHandle(row,type){
      console.log('编辑的数据',row)
      if (type === 'edit') {
        this.formData = row;
        this.handleTypeAdd = type;
        this.visibleRoleGroup = true;
      }
    }
  }
};
</script>

<style lang="less" scoped>
</style>
